@{
    Layout = null;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>@ViewBag.Title</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
    <!-- <link rel="stylesheet" href="./build/css/app.css" media="all"> -->
    <style>
        .kit-sided .layui-side-scroll .layui-nav-item a, .layui-layout-admin .layui-header .layui-layout-right{padding: 0}
.kit-table, .kit-table-header{position: relative;box-shadow: 0 1px 7px 0 #ccc}
::-webkit-scrollbar{width: 10px;height: 10px}
::-webkit-scrollbar-button:vertical{display: none}
::-webkit-scrollbar-corner, ::-webkit-scrollbar-track{background-color: #e2e2e2}
::-webkit-scrollbar-thumb{border-radius: 0;background-color: rgba(0, 0, 0, .3)}
::-webkit-scrollbar-thumb:vertical:hover{background-color: rgba(0, 0, 0, .35)}
::-webkit-scrollbar-thumb:vertical:active{background-color: rgba(0, 0, 0, .38)}
.kit-nav .layui-this, .layui-layout-left .layui-nav-item:hover{background-color: #393D49!important}
.kit-layout-admin .kit-logo-mobile{display: none}
.kit-nav .layui-nav-item{line-height: 50px}
.kit-nav .layui-nav-item .layui-nav-more{top: 22px}
.kit-nav .layui-nav-item .layui-nav-mored{top: 16px}
.kit-nav .layui-nav-item .layui-nav-child{top: 55px}
.kit-nav *{font-size: 13px}
.kit-nav .layui-nav-bar{height: 0}
.kit-nav .layui-this:after{content: none}
.kit-layout-admin .layui-footer{height: 35px;line-height: 35px}
.kit-layout-admin .layui-body{bottom: 35px;top: 50px}
.kit-layout-admin .layui-header{height: 50px}
.kit-layout-admin .layui-logo{line-height: 50px}
.kit-layout-admin .kit-side{top: 50px}
.kit-layout-admin .kit-sided{width: 50px}
.kit-side .layui-side-scroll, .kit-side .layui-side-scroll .layui-nav-tree{width: auto}
.kit-side .layui-side-scroll .kit-side-fold{height: 35px;background-color: #4A5064;color: #aeb9c2;line-height: 35px;text-align: center;cursor: pointer}
.kit-sided .layui-side-scroll .layui-nav-item{text-align: center}
.kit-sided .layui-side-scroll a span{display: none}
.kit-layout-admin .kit-body-folded, .kit-layout-admin .kit-footer-folded{left: 50px}
.kit-table-header{height: 50px}
.kit-table-header .kit-search-btns{padding: 10px;position: absolute}
.kit-table-header .kit-search-inputs{position: absolute;right: 70px;top: 0;padding: 10px 25px 10px 10px}
.kit-table-header .kit-search-inputs .kit-search-keyword{margin-right: 10px;position: relative}
.kit-table-header .kit-search-inputs .kit-search-more{cursor: pointer;color: #009688;position: absolute;top: 15px;right: -50px}
.kit-table-header .kit-search-inputs .kit-search-keyword input{height: 30px;line-height: 30px;width: 200px;padding-right: 32px}
.kit-table-header .kit-search-inputs .kit-search-keyword button{position: absolute;right: 0;top: 0;width: 30px;height: 30px;border: 0;cursor: pointer;background-color: #009688;color: #fff}
.kit-table-header .kit-search-btns .layui-btn{padding: 0 15px;border-radius: 2px 2px 2px 2px;}
.kit-search-mored{/*width: 100%;height: auto;top: 51px;background-color: #fff;z-index: 5;box-shadow: 0 4px 7px -3px #ccc;position: absolute;margin-bottom: 10px;display: none;*/height: auto;top: 51px;background-color: #fff;z-index: 5;box-shadow: -4px 4px 7px -3px #ccc;position: absolute;margin-bottom: 10px;display: none;right: 0;width: 680px;}
.kit-search-mored .kit-search-body{padding: 10px 10px 45px}
.kit-search-mored .kit-search-footer{height: 50px;bottom: 0;left: 0;position: absolute;width: 100%;border-top: 1px solid #e2e2e2;text-align: right}
.kit-tab, .kit-table-body{position: relative}
.kit-search-mored .kit-search-footer .kit-btn{margin: 10px 5px;padding: 0 15px}
.kit-search-mored .kit-search-footer .kit-btn:last-child{margin-right: 15px}
.kit-tab, .kit-table-body .layui-table-view{margin: 0}
.kit-tab{border-bottom: 0;box-shadow: none}
.kit-tab .kit-tab-tool, .kit-tab .kit-tab-tool-body .kit-line{border-bottom: 1px solid #e2e2e2}
.kit-tab .kit-tab-tool{position: absolute;width: 60px;height: 40px;top: 0;right: 10px;border-left: 1px solid #e2e2e2;line-height: 40px;text-align: center;cursor: pointer;border-right: 1px solid #e2e2e2}
.kit-tab .kit-tab-tool:hover{background-color: #f3f3f3}
.kit-tab .kit-tab-tool-body{position: absolute;top: 40px;right: 10px;width: 150px;border: 1px solid #e2e2e2;display: none;background-color: #fff;z-index: 999}
.kit-tab .kit-tab-tool-body ul{text-align: center;padding: 8px 0}
.kit-tab .kit-tab-tool-body ul li.kit-item{line-height: 35px;cursor: pointer;color: #393D49}
.kit-tab .kit-tab-tool-body ul li.kit-item:hover{background-color: #f3f3f3}
.kit-tab .layui-tab-title{width: calc(100% - 71px);padding-right: 0;position: absolute;z-index: 2}
.kit-tab .layui-tab-content{padding: 0;position: relative;top: 41px;overflow-y: auto}
.kit-tab .layui-tab-content iframe{width: 100%;border: 0}
@@media screen and (max-width:950px){.kit-layout-admin .layui-body, .kit-layout-admin .layui-footer, .kit-layout-admin .layui-layout-left{left: 50px}
.kit-layout-admin .kit-side{width: 50px}
.kit-layout-admin .kit-side .layui-side-scroll .layui-nav li.layui-nav-item, .kit-layout-admin .kit-side .layui-side-scroll .layui-nav li.layui-nav-item dl dd{text-align: center}
.kit-layout-admin .kit-side .layui-side-scroll .layui-nav li.layui-nav-item a, .kit-layout-admin .kit-side .layui-side-scroll .layui-nav li.layui-nav-item dl dd a{padding: 0}
.kit-layout-admin .kit-side .layui-side-scroll .layui-nav li.layui-nav-item a span, .kit-layout-admin .kit-side .layui-side-scroll .layui-nav li.layui-nav-item dl dd a span, .kit-layout-admin .layui-logo, .kit-side .layui-side-scroll .kit-side-fold{display: none}
.kit-layout-admin .kit-logo-mobile{display: block;width: 50px}}
    </style>
</head>

<body>
    <div class="kit-table">
        <div class="layui-form" lay-filter="kit-search-form">
            <div class="kit-table-header">
                <div class="kit-search-btns layui-btn-group demoTable">
                    <a href="javascript:;" data-action="add" data-type="add" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe61f;</i> 新增</a>
                    <!-- <a href="javascript:;" data-action="del-bulk" data-type="delBulk" class="layui-btn layui-btn-sm layui-btn-danger"><i class="layui-icon">&#xe640;</i> 批量删除</a> -->
                    <!-- <button class="layui-btn layui-btn-sm" data-type="getCheckData">获取选中行数据</button>
                    <button class="layui-btn layui-btn-sm" data-type="getCheckLength">获取选中数目</button>
                    <button class="layui-btn layui-btn-sm" data-type="isAll">验证是否全选</button> -->
                </div>
                <div class="kit-search-inputs">
                    <div class="kit-search-keyword">
                        <input type="text" class="layui-input" name="UserName" placeholder="输入登录名查找...">
                        <button lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
                    </div>
                    <div class="kit-search-more" id="kit-search-more">更多筛选<i class="layui-icon">&#xe61a;</i></div>
                </div>
            </div>
        </div>
        <form class="layui-form" lay-filter="kit-search-form">
            <div class="kit-search-mored layui-anim layui-anim-upbit" style="display: none;">
                <div class="kit-search-body">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">登录名称</label>
                            <div class="layui-input-inline">
                                <input type="tel" name="UserName" placeholder="请输入登录名" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-inline">
                                <input type="text" name="Email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">创建时间</label>
                            <div class="layui-input-inline">
                                <input type="tel" name="CreateTimeMin" id="CreateTime" placeholder="请选择创范围" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">角色</label>
                            <div class="layui-input-inline" id="view">
                                <!-- <select name="RoleId">
                                     <option value=""></option>
                                    <option value="0">写作</option>
                                    <option value="1">阅读</option>
                                    <option value="2">游戏</option>
                                    <option value="3">音乐</option>
                                    <option value="4">旅行</option>
                                </select> -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="kit-search-footer">
                    <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary kit-btn">重置</button>
                    <button lay-submit="" lay-filter="search" class="layui-btn layui-btn-sm kit-btn">确定</button>
                </div>
            </div>
        </form>
    </div>

    <table  id="table_data" lay-filter="lf_table_data"></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

<script id="role-tpl" type="text/html">
<select name="RoleId" lay-filter="lf_role" >
    <option value=""></option>
    {{# layui.each(d.roles,function(index,item){ }}
        <option value="{{item.Id}}">{{item.Name}}</option>
    {{# }); }}
</select>
</script>

<script type="text/html" id="edit-tpl">
    <div style="margin:10px">
        <form class="layui-form" action="" lay-filter="form-edit">
            <input type="hidden" name="id" value="{{d.user.Id}}" />
            <div class="layui-form-item">
                <label class="layui-form-label">登录名</label>
                {{# if(d.edit===true){}}
                    <div class="layui-input-inline">
                       <div class="layui-form-mid layui-word-aux">{{d.user.UserName}}</div>
                    </div>
                    {{#}else{}}
                    <div class="layui-input-inline">
                        <input type="text" name="UserName" required lay-verify="required" value="{{d.user.UserName}}" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">请设置字母数字</div>
                {{#};}}
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    {{# if(d.edit===true){}}
                      <input type="password" name="Password"  placeholder="请输入密码" autocomplete="off" class="layui-input">
                      {{#}else{}}
                      <input type="password" name="Password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    {{#};}}
                </div>
                <div class="layui-form-mid layui-word-aux">请设置复杂一些的密码</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" name="Email" required lay-verify="required" value="{{d.user.Email}}" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">请设置邮箱</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-inline">
                    <select name="RoleId" id="RoleId" lay-verify="required">
                      <option value=""></option>
                      {{# layui.each(d.roles,function(index,item){ }}                      
                      {{# if(item.Id===parseInt(d.user.RoleId)){}}
                      <option value="{{item.Id}}" selected>{{item.Name}}</option>
                      {{#}else{}}
                      <option value="{{item.Id}}">{{item.Name}}</option>
                      {{#};}}
                      {{# }); }}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    {{# var disable = parseInt(d.user.Status) === 0?'checked':'';}} {{# var enable = parseInt(d.user.Status) === 1?'checked':'';}}
                    <input type="radio" name="Status" value="1" title="启用" {{enable}} />
                    <input type="radio" name="Status" value="0" title="禁用" {{disable}} />
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注信息</label>
                <div class="layui-input-block">
                    <textarea name="Remark" placeholder="备注信息" class="layui-textarea">{{d.user.Remark}}</textarea>
                </div>
            </div>
            <div class="layui-form-item" style="display:none;">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formEdit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</script>

    <script src="/plugins/layui/layui.js"></script>
    <script>
        /**
        * 将日期格式化成指定格式的字符串
        * param date 要格式化的日期，不传时默认当前时间，也可以是一个时间戳
        * param fmt 目标字符串格式，支持的字符有：y,M,d,q,w,H,h,m,S，默认：yyyy-MM-dd HH:mm:ss
        * returns 返回格式化后的日期字符串
        */
        function dateFormat(date, fmt)
        {
            date = date == undefined ? new Date() : date;
            date = typeof date == 'number' ? new Date(date) : date;
            fmt = fmt || 'yyyy-MM-dd HH:mm:ss';
            var obj =
            {
                'y': date.getFullYear(), // 年份，注意必须用getFullYear
                'M': date.getMonth() + 1, // 月份，注意是从0-11
                'd': date.getDate(), // 日期
                'q': Math.floor((date.getMonth() + 3) / 3), // 季度
                'w': date.getDay(), // 星期，注意是0-6
                'H': date.getHours(), // 24小时制
                'h': date.getHours() % 12 == 0 ? 12 : date.getHours() % 12, // 12小时制
                'm': date.getMinutes(), // 分钟
                's': date.getSeconds(), // 秒
                'S': date.getMilliseconds() // 毫秒
            };
            var week = ['天', '一', '二', '三', '四', '五', '六'];
            for(var i in obj)
            {
                fmt = fmt.replace(new RegExp(i+'+', 'g'), function(m)
                {
                    var val = obj[i] + '';
                    if(i == 'w') return (m.length > 2 ? '星期' : '周') + week[val];
                    for(var j = 0, len = val.length; j < m.length - len; j++) val = '0' + val;
                    return m.length == 1 ? val : val.substring(val.length - m.length);
                });
            }
            return fmt;
        }

        layui.use(['jquery','table','form','laydate'], function () {
            var table = layui.table;
            var laytpl = layui.laytpl;
            var form = layui.form;
            var laydate = layui.laydate;
            var $ = layui.$;
            var urlList='/Admin/User/Index';
            var urlAdd='/Admin/User/Add';
            var urlEdit='/Admin/User/Edit';
            var urlDel='/Admin/User/Del';
            var urlRoleList='/Admin/Ajax/GetRoleList';
            //lay-data="{url:'/table.json', page:true, id:'idTest',height: 'full-75'}"
            var staticData = {
                roles: []
            };
            //向服务端发送删除指令
            $.ajax({
                url: urlRoleList,
                type: 'get',
                data: {},
                success: function (data, textStatus) {
                    if (textStatus == 'success') {
                        //console.log(data);
                        if(data.Result){
                           staticData.roles = data.Data;
                           //获取到数据之后再加载到选择框
                            laytpl($('#role-tpl').html()).render(staticData, function(html){
                                var view = document.getElementById('view');
                                view.innerHTML = html;
                                form.render('select');
                            });
                        }
                    }
                }
            });
            console.log(staticData);
            //方法级渲染
            table.render({
                elem: '#table_data'//指定原始表格元素选择器（推荐id选择器）
                , cols: [[ //标题栏
                    { checkbox:true, fixed: true }
                    , { field: 'Id', title: 'ID', width: 60, sort: true, fixed: true }
                    , { field: 'UserName', width: 120, title: '登录名'}
                    , { field: 'RoleText', width: 120, title: '角色'}
                    , { field: 'Email', width: 150, title: '邮箱'}
                    , { field: 'CreateTime', width: 150, title: '创建时间', templet:'<div>{{dateFormat(parseInt(d.CreateTime+"000"),"yyyy-MM-dd HH:mm")}}</div>'}
                    , { field: 'LastLoginTime', width: 170, title: '最后登录时间', templet:'<div>{{dateFormat(parseInt(d.LastLoginTime+"000"),"yyyy-MM-dd HH:mm:ss")}}</div>'}
                    , { field: 'Remark', width: 160, title: '备注信息' }
                    , { fixed: 'right', width:160, align:'center', toolbar: '#barDemo', title: '操作'}
                ]]
                , url: urlList
                , page: true
                , limit: 10
                , id: 'ldid_admin'
                , height: 'full-75',
                response: {
                    statusName: 'Code',
                    statusCode: 200,
                    msgName: 'Message',
                    countName: 'Total',
                    dataName: 'Data'
                },
                request: {
                    pageName: 'Index', //页码的参数名称，默认：page
                    limitName: 'Size' //每页数据量的参数名，默认：limit
                }  
            });
            
            
            //日期范围选择
            laydate.render({ 
            elem: '#CreateTime'
            ,range: '~' //或 range: '~' 来自定义分割字符
            });
            //监听表格复选框选择
            table.on('checkbox(lf_table_data)', function (obj) {
                console.log(obj)
            });
            //监听工具条
            table.on('tool(lf_table_data)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.msg('ID：' + data.Id + ' 的查看操作');
                } else if (obj.event === 'del') {
                    if(data.Id === 1){layer.msg("不允许操作超级管理员");return;}
                    layer.confirm('真的删除行么', function (index) {
                        layer.close(index);
                        //向服务端发送删除指令
                        $.ajax({
                            url: urlDel,
                            type: 'delete',
                            data: {Id:data.Id},
                            success: function (data, textStatus) {
                                if (textStatus == 'success') {
                                    //console.log(data);
                                    layer.msg(data.Message);
                                    if(data.Result){
                                        obj.del();
                                    }
                                    //if (data.Result == true) {
                                        //window.location.href = "";
                                    //}
                                }
                            }
                        });
                    });
                } else if (obj.event === 'edit') {
                    if(data.Id === 1){layer.msg("不允许操作超级管理员");return;}
                    editObj = obj;
                    //layer.alert('编辑行：<br>' + JSON.stringify(data));
                     editFlg = true;
                    var d = {
                        user: data,
                        roles: staticData.roles,
                        edit:true
                    };
                    
                    //do something
                    laytpl($('#edit-tpl').html()).render(d, function(html) {
                        layer.open({
                            type: 1,
                            title: '表单',
                            content: html,
                            area: ['600px', '450px'],
                            btn: ['提交', '重置', '取消'],
                            yes: function(index, layero) {
                                editIndex = index;
                                $('form[lay-filter="form-edit"]').find('button[lay-submit]').click();
                            },
                            btn2: function(index, layero) {
                                $('form[lay-filter="form-edit"]').find('button[type="reset"]').click();
                                return false;
                            },
                            success: function() {
                                form.render(null, 'form-edit');
                                
                            }
                        });
                    });
                    //同步更新缓存对应的值
                    //obj.update({
                    //    UserName: '测试'
                    //    ,Email: 'xxx@xxx.com'
                    //});
                }
            });
            
            var active = {
                getCheckData: function () { //获取选中数据
                    var checkStatus = table.checkStatus('ldid_admin')
                        , data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                }
                , getCheckLength: function () { //获取选中数目
                    var checkStatus = table.checkStatus('ldid_admin')
                        , data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                }
                , isAll: function () { //验证是否全选
                    var checkStatus = table.checkStatus('ldid_admin');
                    layer.msg(checkStatus.isAll ? '全选' : '未全选')
                }, delBulk: function () { //获取选中数目
                    var checkStatus = table.checkStatus('ldid_admin')
                        , data = checkStatus.data;
                    //layer.msg('删除：' + data.length + ' 个');
                    if (data.length === 0) {
                        layer.msg('请选择要删除的数据');
                        return;
                    }
                    var names = [], ids = [];
                    layui.each(data, function (index, item) {
                        console.log(item);
                        names.push(item.username);
                        ids.push(item.Id);
                    });
                    layer.msg(ids.join(','));
                    console.log(ids.join(','));
                }, add: function () { //添加
                    editFlg = false;
                    //var checkStatus = table.checkStatus('idTest');
                    //layer.msg('添加操作')
                    var d = {
                        user: {
                            Id: 0,
                            UserName: '',
                            Password: '',
                            Email: '',
                            Status: 0,
                            Remark: ''
                        },
                        roles: staticData.roles,
                        edit:false
                    };
                    //do something
                    laytpl($('#edit-tpl').html()).render(d, function(html) {
                        layer.open({
                            type: 1,
                            title: '表单',
                            content: html,
                            area: ['600px', '450px'],
                            btn: ['提交', '重置', '取消'],
                            yes: function(index, layero) {
                                editIndex = index;
                                $('form[lay-filter="form-edit"]').find('button[lay-submit]').click();
                            },
                            btn2: function(index, layero) {
                                $('form[lay-filter="form-edit"]').find('button[type="reset"]').click();
                                return false;
                            },
                            success: function() {
                                form.render(null, 'form-edit');
                                
                            }
                        });
                    });
                    //table.reload('ldid_admin', {
                    //    url: '/Admin/Access/UserList'
                        //,where: {} //设定异步数据接口的额外参数
                        //,height: 300
                   // });
                }
            };

            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            //监听搜索表单提交
            form.on('submit(search)', function (data) {
                console.log(data.field);
                layer.msg(JSON.stringify(data.field));
                //带条件查询(当前页面url)
                // tableIns.reload({
                //     where: data.field
                // });
                //载入数据(ajax加载查询)
                table.reload('ldid_admin', {
                    url: urlList
                    ,where: data.field //设定异步数据接口的额外参数
                });
                return false;
            });

            //form.render(null, 'kit-search-form');
            $('#kit-search-more').on('click', function () {
                $('.kit-search-mored').toggle();
            });
            var editIndex;
            var editObj;
            var editFlg = true;
            form.on('submit(formEdit)', function (data) {
                if(editFlg){
                    //layer.alert('写好的行：<br>' + JSON.stringify(data));
                    //向服务端发送指令
                    $.ajax({
                        url: urlEdit,
                        type: 'put',
                        data: data.field,
                        success: function (data, textStatus) {
                            if (textStatus == 'success') {
                                layer.msg(data.Message);
                                //location.reload();
                            }
                        }
                    });
                    //获取被选择的那个
                    data.field.RoleText=$("#RoleId").find("option:selected").text();
                    console.log(data.field)
                    //console.log(JSON.stringify(data.field))
                    editObj.update(data.field);
                }else{
                    editFlg = true;
                    //向服务端发送指令
                    $.ajax({
                        url: urlAdd,
                        type: 'post',
                        data: data.field,
                        success: function (data, textStatus) {
                            if (textStatus == 'success') {
                                table.reload('ldid_admin', {
                                    url: urlList
                                });
                                layer.msg(data.Message);
                            }
                        }
                    });
                }
                editIndex && layer.close(editIndex); //关闭弹出层
                return false;
            });
        });
    </script>
</body>
</html>